import React from 'react'
import { Button } from '../ui/Button'
import { Badge } from '../ui/Badge'
import { 
  ArrowLeft, 
  CheckCircle, 
  BookOpen, 
  Bell, 
  Tag,
  User,
  Sparkles
} from 'lucide-react'

interface CompletionStepProps {
  preferences: {
    categories: string[]
    keywords: string[]
    authors: string[]
    notifications: any
  }
  onComplete: () => void
  onPrevious: () => void
  isCompleting: boolean
}

const categoryLabels: Record<string, string> = {
  'cs.AI': 'Artificial Intelligence',
  'cs.CL': 'Computation and Language',
  'cs.CV': 'Computer Vision',
  'cs.LG': 'Machine Learning',
  'cs.NE': 'Neural Computing',
  'cs.RO': 'Robotics',
  'math.AG': 'Algebraic Geometry',
  'math.AT': 'Algebraic Topology',
  'math.CO': 'Combinatorics',
  'physics.app-ph': 'Applied Physics',
  'physics.atom-ph': 'Atomic Physics',
  'stat.ML': 'Machine Learning',
  'stat.TH': 'Statistics Theory'
}

export function CompletionStep({
  preferences,
  onComplete,
  onPrevious,
  isCompleting
}: CompletionStepProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm p-8">
      <div className="text-center mb-8">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle className="h-8 w-8 text-green-600" />
        </div>
        
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          You're All Set!
        </h2>
        <p className="text-gray-600">
          Here's a summary of your preferences. You can always change these later in settings.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-6 mb-8">
        {/* Research Interests */}
        <div className="border border-gray-200 rounded-lg p-6">
          <div className="flex items-center mb-4">
            <div className="p-2 bg-blue-50 rounded-lg mr-3">
              <BookOpen className="h-5 w-5 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-900">Research Areas</h3>
          </div>
          
          <div className="space-y-2">
            {preferences.categories.slice(0, 6).map(category => (
              <Badge key={category} variant="secondary" className="mr-2 mb-2">
                {categoryLabels[category] || category}
              </Badge>
            ))}
            {preferences.categories.length > 6 && (
              <Badge variant="outline" className="mr-2 mb-2">
                +{preferences.categories.length - 6} more
              </Badge>
            )}
          </div>
        </div>

        {/* Notifications */}
        <div className="border border-gray-200 rounded-lg p-6">
          <div className="flex items-center mb-4">
            <div className="p-2 bg-purple-50 rounded-lg mr-3">
              <Bell className="h-5 w-5 text-purple-600" />
            </div>
            <h3 className="font-semibold text-gray-900">Notifications</h3>
          </div>
          
          <div className="space-y-2 text-sm">
            <div className="flex items-center">
              <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
              <span>Email notifications: {preferences.notifications.email_notifications ? 'Enabled' : 'Disabled'}</span>
            </div>
            <div className="flex items-center">
              <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
              <span>Digest frequency: {preferences.notifications.digest_frequency || 'Weekly'}</span>
            </div>
            <div className="flex items-center">
              <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
              <span>Paper recommendations: {preferences.notifications.paper_recommendations ? 'Yes' : 'No'}</span>
            </div>
          </div>
        </div>

        {/* Keywords */}
        {preferences.keywords.length > 0 && (
          <div className="border border-gray-200 rounded-lg p-6">
            <div className="flex items-center mb-4">
              <div className="p-2 bg-green-50 rounded-lg mr-3">
                <Tag className="h-5 w-5 text-green-600" />
              </div>
              <h3 className="font-semibold text-gray-900">Keywords</h3>
            </div>
            
            <div className="space-y-2">
              {preferences.keywords.slice(0, 5).map(keyword => (
                <Badge key={keyword} variant="outline" className="mr-2 mb-2">
                  {keyword}
                </Badge>
              ))}
              {preferences.keywords.length > 5 && (
                <Badge variant="outline" className="mr-2 mb-2">
                  +{preferences.keywords.length - 5} more
                </Badge>
              )}
            </div>
          </div>
        )}

        {/* Authors */}
        {preferences.authors.length > 0 && (
          <div className="border border-gray-200 rounded-lg p-6">
            <div className="flex items-center mb-4">
              <div className="p-2 bg-orange-50 rounded-lg mr-3">
                <User className="h-5 w-5 text-orange-600" />
              </div>
              <h3 className="font-semibold text-gray-900">Authors</h3>
            </div>
            
            <div className="space-y-2">
              {preferences.authors.slice(0, 3).map(author => (
                <Badge key={author} variant="outline" className="mr-2 mb-2">
                  {author}
                </Badge>
              ))}
              {preferences.authors.length > 3 && (
                <Badge variant="outline" className="mr-2 mb-2">
                  +{preferences.authors.length - 3} more
                </Badge>
              )}
            </div>
          </div>
        )}
      </div>

      {/* What's Next */}
      <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 mb-8">
        <div className="flex items-center mb-3">
          <Sparkles className="h-5 w-5 text-blue-600 mr-2" />
          <h3 className="font-semibold text-gray-900">What's Next?</h3>
        </div>
        
        <ul className="space-y-2 text-sm text-gray-700">
          <li className="flex items-center">
            <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
            Your personalized dashboard will be ready with tailored recommendations
          </li>
          <li className="flex items-center">
            <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
            We'll start monitoring for papers matching your interests
          </li>
          <li className="flex items-center">
            <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
            You'll receive your first digest based on your chosen frequency
          </li>
        </ul>
      </div>

      {/* Navigation */}
      <div className="flex justify-between items-center">
        <Button variant="outline" onClick={onPrevious} disabled={isCompleting}>
          <ArrowLeft className="mr-2 h-4 w-4" /> Back
        </Button>
        
        <Button 
          onClick={onComplete} 
          disabled={isCompleting}
          className="px-8"
        >
          {isCompleting ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
              Setting up...
            </>
          ) : (
            <>
              <Sparkles className="mr-2 h-4 w-4" />
              Complete Setup
            </>
          )}
        </Button>
      </div>
    </div>
  )
}